<template>
  <div class="home-new" ref="lazyTarget">
    <!-- panel 面板 -->
    <div class="home-panel">
      <div class="container">
        <div class="head">
          <h3>
            新鲜好物
            <span>新鲜出炉 品质靠谱</span>
          </h3>
          <more to="/">
            <!-- <template v-solt:right></template> -->
          </more>
        </div>
        <!-- 面板内容 -->
        <transition name="fade">
          <!-- 面板内容 -->
          <ul class="goods-list">
            <template v-if="Hotlist.length">
              <li class="hover-shadow" v-for="item in Hotlist" :key="item.id">
                <router-link to="/product/id">
                  <img v-lazy :src="item.picture" alt="" />
                  <p class="name ellipsis">{{ item.name }}</p>
                  <p class="price">&yen;{{ item.price }}</p>
                </router-link>
              </li>
            </template>

            <template v-else>
              <div v-for="item in 4" :key="item" class="item">
                <skeleton bg="#2b2b27" width="306px" height="306px"></skeleton>
                <skeleton
                  bg="#e4e4e4"
                  width="160px"
                  height="24px"
                  style="margin-top: 5px"
                ></skeleton>
                <skeleton
                  bg="#e4e4e4"
                  width="160px"
                  height="24px"
                  style="margin-top: 5px"
                ></skeleton>
              </div>
            </template>
          </ul>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { findhotshop } from '@/api/home.js'
import { userlazyDta } from '@/utils/hooks.js'
const lazyTarget = ref(null)
const Hotlist = ref([])
const Hotshop = async () => {
  const { result } = await findhotshop()
  Hotlist.value = result
  // console.log(result)
}

userlazyDta(lazyTarget, Hotshop)
</script>

<style lang="scss" scoped>
.goods-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 406px;
  .item {
    // background-color: #e4e4e4;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  li {
    width: 306px;
    height: 406px;
    background: #ffffff;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding: 12px 30px 0 30px;
      text-align: center;
    }
    .price {
      color: $priceColor;
    }
  }
}

// 查看更多样式
.more {
  margin-bottom: 2px;
  span {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #999;
  }
  i {
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    top: 2px;
    color: #ccc;
  }
  &:hover {
    span,
    i {
      color: $xtxColor;
    }
  }
}

// panel 面板样式
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      span {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}

// 新鲜好物样式结束

// 人气爆款
</style>
